<template>
  <div class="pay_mode">
    <!-- 支付方式选择 -->
    <my-header :left="true" title="付款详情"></my-header>
    <!-- 价格显示部分 -->
    <show-price class="show_price" :value="(wait_pay_value).toFixed(2)"></show-price>
    <!-- 选择支付方式部分 -->
    <div class="chooes_pay_mode">
      <p>选择支付方式</p>
      <div class="button_area">
        <!-- 方式1 测试接口 -->
        <!-- 方式2 APP支付宝沙箱接口 -->
        <van-button type="info" :disabled="isok" @click="zfb_api('app')">支付宝沙箱APP</van-button>
        <van-button type="warning" :disabled="isok" @click="zfb_api('code')">支付宝扫码支付</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import MyHeader from "../common/Header";// 头部组件
import ShowPrice from "./components/ShowPrice"; // 显示价格组件
export default {
  name:"PayMode",
  components:{
    MyHeader,
    ShowPrice
  },
  data() {
    return {
      isok:true,// 是否启用支付按钮
      wait_pay_value:-1,// 待支付价格
      buy_gameinfo:{
        gid:null,
        cid:null
      }
    }
  },
  created(){
    // 获取参数
    // console.log(this.$route.query);
    let query = this.$route.query
    this.buy_gameinfo = {
      gid:query.gameid,
      cid:query.cid
    }
    this.calcPrice();
  },
  methods: {
    // 计算需要支付的价格
    async calcPrice(){
      const {data:res} = await this.$http.post("/calcPayValue",{gid:this.buy_gameinfo.gid,cid:this.buy_gameinfo.cid});
      if(res.status == 403){// 登陆过期
        return this.$router.push("/login");
      }
      if(!res.isok){// 返回false 阻止购买 通知不可购买原因
        this.isok = true;// 阻止购买按钮
        this.$dialog.alert({title:"无法继续操作",message:res.message}).then(() => {
          this.$router.go(-1);
        })
        return;
      }
      this.isok = false;// 开放购买按钮
      this.wait_pay_value = res.data;
      // console.log(res);
    },
    async zfb_api(type){
      // 支付宝接口
      // 发起支付请求
      const {data:res} = await this.$http.post("/order_pay",{gid:this.buy_gameinfo.gid,cid:this.buy_gameinfo.cid,type:type});
      if(!res.isok){
        this.$dialog.alert({title:"无法继续操作",message:res.message});
        return
      }
      // 跳转页面
      console.log(res.data.result);
      window.location = res.data.result;
    }
  },
}
</script>
<style lang="less" scoped>
  .pay_mode{
    padding-top: 0.45rem;
  }
  .show_price{
    margin-top: 0.1rem;
  }
  .chooes_pay_mode{
    width: 100%;
    box-sizing: border-box;
    padding: 0rem 0.1rem;
    margin-top: 0.1rem;
    font-size: 0.12rem;
    color: #999999;
  }
  .button_area{
    margin-top: 0.1rem;
    .van-button{
      width: 100%;
      display: block;
      margin-top: 0.1rem;
    }
  }
</style>